import React, { useState, useRef } from 'react';
import { Form, Input, Button, Typography, Spin, message, Card, Row, Col, Select } from 'antd';
import { CopyOutlined, DownloadOutlined } from '@ant-design/icons';
import CommonTour, { TourGuideButton } from '@/components/CommonTour';

const { Title, Text } = Typography;
const { TextArea } = Input;

export default function DressingTips() {
  const [form] = Form.useForm();
  const [isGenerating, setIsGenerating] = useState<boolean>(false);
  const [generatedContent, setGeneratedContent] = useState<string>('');
  const [tourVisible, setTourVisible] = useState(false);

  // 使用HTML元素的ref引用方式
  const seasonRef = useRef<HTMLDivElement>(null);
  const occasionRef = useRef<HTMLDivElement>(null);
  const styleRef = useRef<HTMLDivElement>(null);
  const bodyTypeRef = useRef<HTMLDivElement>(null);
  const colorRef = useRef<HTMLDivElement>(null);
  const piecesRef = useRef<HTMLDivElement>(null);
  const submitRef = useRef<HTMLDivElement>(null);
  const resultRef = useRef<HTMLDivElement>(null);

  const showTour = () => {
    // 延迟显示，确保DOM已经渲染
    setTimeout(() => {
      setTourVisible(true);
    }, 100);
  };

  // 生成穿搭攻略的模拟函数
  const generateContent = (
    season: string,
    occasion: string,
    style: string,
    bodyType: string,
    colorPreferences: string,
    keyPieces: string
  ): string => {
    // 这里是模拟生成内容的逻辑，实际应用中应该调用AI模型
    let result = '';

    // 攻略标题
    result += `👗 ${season}${occasion}穿搭指南 | ${style}风格全解析\n\n`;

    // 开篇介绍
    result += `【季节特点与穿搭要点】\n`;
    if (season === '春季') {
      result += `🌸 春季气温多变，穿搭要注重层次感，方便随时增减衣物。\n`;
    } else if (season === '夏季') {
      result += `☀️ 夏季炎热潮湿，应选择透气、轻薄的面料，同时注意防晒。\n`;
    } else if (season === '秋季') {
      result += `🍂 秋季温差较大，适合叠穿，既保暖又时尚。\n`;
    } else if (season === '冬季') {
      result += `❄️ 冬季寒冷干燥，穿搭要注重保暖，同时保持时尚感。\n`;
    }

    // 场合着装要求
    result += `\n【${occasion}着装要求】\n`;
    if (occasion === '日常休闲') {
      result += `👖 日常休闲场合着装以舒适、随性为主，可以选择卫衣、牛仔裤等单品。\n`;
    } else if (occasion === '职场通勤') {
      result += `💼 职场通勤需要专业、得体的着装，建议选择西装、衬衫、铅笔裙等单品。\n`;
    } else if (occasion === '约会聚会') {
      result += `💃 约会聚会可以稍微正式一些，展现个人魅力，可以选择连衣裙、高跟鞋等。\n`;
    } else if (occasion === '运动健身') {
      result += `🏃 运动健身需要舒适、透气的运动装，选择专业的运动品牌和面料。\n`;
    }

    // 风格解析
    result += `\n【${style}风格解析】\n`;
    if (style === '简约风') {
      result += `✨ 简约风强调"少即是多"，注重线条和质感，颜色以基础色为主。\n`;
    } else if (style === '复古风') {
      result += `🎞️ 复古风借鉴过去年代的元素，如格纹、波点、高腰设计等。\n`;
    } else if (style === '街头风') {
      result += `🚶 街头风充满年轻活力，常见元素有卫衣、球鞋、棒球帽等。\n`;
    } else if (style === '优雅风') {
      result += `👸 优雅风注重女性魅力，常见元素有连衣裙、高跟鞋、珍珠配饰等。\n`;
    }

    // 体型穿搭建议
    result += `\n【${bodyType}体型穿搭建议】\n`;
    if (bodyType === '苹果型') {
      result += `🍎 苹果型身材上半身较丰满，建议选择V领上衣，下装选择宽松的裤子或裙子。\n`;
    } else if (bodyType === '梨型') {
      result += `🍐 梨型身材下半身较丰满，建议选择A字裙或阔腿裤，上衣可以选择修身款式。\n`;
    } else if (bodyType === '沙漏型') {
      result += `⏳ 沙漏型身材比例匀称，适合凸显曲线的款式，如收腰连衣裙、修身西装等。\n`;
    } else if (bodyType === '直线型') {
      result += `📏 直线型身材线条较直，建议通过叠穿和配饰来增加层次感，打造曲线。\n`;
    }

    // 颜色搭配
    result += `\n【颜色搭配方案】\n`;
    if (colorPreferences) {
      result += `🎨 基于你的颜色偏好，推荐以下搭配方案：\n`;
      result += colorPreferences + '\n';
    } else {
      // 根据季节生成默认颜色搭配
      if (season === '春季') {
        result += `🌼 春季适合明亮、清新的颜色，如浅粉、浅蓝、薄荷绿等。\n`;
      } else if (season === '夏季') {
        result += `🌊 夏季适合清爽、饱和度高的颜色，如白色、黄色、湖蓝色等。\n`;
      } else if (season === '秋季') {
        result += `🍁 秋季适合温暖、沉稳的颜色，如棕色、米色、酒红色等。\n`;
      } else if (season === '冬季') {
        result += `❄️ 冬季适合经典、对比强烈的颜色，如黑白灰、红色、藏青色等。\n`;
      }
    }

    // 单品推荐
    result += `\n【必备单品推荐】\n`;
    if (keyPieces) {
      const pieces = keyPieces.split('\n').filter(p => p.trim());
      pieces.forEach((piece, index) => {
        result += `👕 ${index + 1}. ${piece}\n`;
      });
    } else {
      // 根据季节和场合生成默认单品推荐
      result += `1. 适合${season}的基础外套\n`;
      result += `2. ${occasion}必备的经典单品\n`;
      result += `3. 百搭的鞋子和配饰\n`;
      result += `4. 适合${style}风格的特色单品\n`;
    }

    // 搭配示例
    result += `\n【完整搭配示例】\n`;
    result += `💡 搭配一：\n`;
    result += `- 上衣：适合${season}的${style}风格上衣\n`;
    result += `- 下装：适合${bodyType}体型的裤子/裙子\n`;
    result += `- 鞋子：与整体风格匹配的鞋子\n`;
    result += `- 配饰：提升整体造型的小细节\n\n`;

    result += `💡 搭配二：\n`;
    result += `- 上衣：适合${occasion}的实用单品\n`;
    result += `- 下装：与上衣相搭配的款式\n`;
    result += `- 鞋子：舒适又时尚的选择\n`;
    result += `- 配饰：点睛之笔的小物件\n`;

    // 实用贴士
    result += `\n【穿搭小贴士】\n`;
    result += `1. 注重面料的质感，提升整体穿搭的高级感\n`;
    result += `2. 合理运用配饰，为整体造型加分\n`;
    result += `3. 了解自己的体型特点，选择适合自己的款式\n`;
    result += `4. 保持个人风格的同时，适当尝试新的搭配\n`;

    return result;
  };

  // 处理表单提交
  const handleSubmit = async (values: any) => {
    try {
      setIsGenerating(true);
      const { season, occasion, style, bodyType, colorPreferences, keyPieces } = values;

      // 模拟API请求延迟
      await new Promise(resolve => setTimeout(resolve, 1500));

      const generated = generateContent(season, occasion, style, bodyType, colorPreferences, keyPieces);
      setGeneratedContent(generated);
      message.success('穿搭攻略生成成功！');
    } catch (error) {
      message.error('生成失败，请稍后重试');
    } finally {
      setIsGenerating(false);
    }
  };

  // 复制生成的内容
  const handleCopy = () => {
    navigator.clipboard.writeText(generatedContent).then(() => {
      message.success('内容已复制到剪贴板');
    }).catch(() => {
      message.error('复制失败');
    });
  };

  // 下载生成的内容
  const handleDownload = () => {
    const blob = new Blob([generatedContent], { type: 'text/plain;charset=utf-8' });
    const link = document.createElement('a');
    link.href = URL.createObjectURL(blob);
    link.download = '穿搭攻略.txt';
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
    URL.revokeObjectURL(link.href);
    message.success('文件下载成功');
  };

  // 定义引导步骤
  const tourSteps = [
    {
      key: 'season',
      title: '选择季节',
      description: '根据您的需求选择适用的季节',
    },
    {
      key: 'occasion',
      title: '选择场合',
      description: '选择穿搭适用的场合，如日常休闲、职场通勤等',
    },
    {
      key: 'style',
      title: '选择风格',
      description: '选择您喜欢的穿搭风格',
    },
    {
      key: 'bodyType',
      title: '选择体型',
      description: '选择您的体型类型，以便获得更精准的穿搭建议',
    },
    {
      key: 'color',
      title: '颜色偏好（可选）',
      description: '输入您喜欢的颜色搭配，如不填写将根据季节推荐',
    },
    {
      key: 'pieces',
      title: '必备单品（可选）',
      description: '输入您想推荐的单品，每行一个，如不填写将自动生成',
    },
    {
      key: 'submit',
      title: '生成穿搭攻略',
      description: '点击按钮生成个性化的穿搭攻略',
    },
    {
      key: 'result',
      title: '查看生成结果',
      description: '生成成功后，您可以在此处查看、复制或下载生成的穿搭攻略',
    },
  ];

  // 组织ref引用
  const tourRefs = {
    season: seasonRef,
    occasion: occasionRef,
    style: styleRef,
    bodyType: bodyTypeRef,
    color: colorRef,
    pieces: piecesRef,
    submit: submitRef,
    result: resultRef,
  };

  // 季节选项
  const seasonOptions = [
    { label: '春季', value: '春季' },
    { label: '夏季', value: '夏季' },
    { label: '秋季', value: '秋季' },
    { label: '冬季', value: '冬季' },
  ];

  // 场合选项
  const occasionOptions = [
    { label: '日常休闲', value: '日常休闲' },
    { label: '职场通勤', value: '职场通勤' },
    { label: '约会聚会', value: '约会聚会' },
    { label: '运动健身', value: '运动健身' },
  ];

  // 风格选项
  const styleOptions = [
    { label: '简约风', value: '简约风' },
    { label: '复古风', value: '复古风' },
    { label: '街头风', value: '街头风' },
    { label: '优雅风', value: '优雅风' },
  ];

  // 体型选项
  const bodyTypeOptions = [
    { label: '苹果型', value: '苹果型' },
    { label: '梨型', value: '梨型' },
    { label: '沙漏型', value: '沙漏型' },
    { label: '直线型', value: '直线型' },
  ];

  return (
    <>
      <div style={{ padding: '24px' }}>
        <div style={{ marginBottom: 24 }}>
          <Title level={2} style={{ display: 'flex', alignItems: 'center', marginBottom: 8 }}>
            穿搭攻略生成
            <TourGuideButton onClick={showTour} />
          </Title>
        </div>
        <Card style={{ marginBottom: '24px' }}>
          <Form
            form={form}
            layout="vertical"
            onFinish={handleSubmit}
            initialValues={{
              season: '春季',
              occasion: '日常休闲',
              style: '简约风',
              bodyType: '苹果型',
            }}
          >
            <Row gutter={[16, 16]}>
              <Col xs={24} md={12}>
                <Form.Item
                  name="season"
                  label="季节"
                  rules={[{ required: true, message: '请选择季节' }]}
                >
                  <div ref={seasonRef}>
                    <Select placeholder="请选择季节" options={seasonOptions} />
                  </div>
                </Form.Item>
              </Col>
              <Col xs={24} md={12}>
                <Form.Item
                  name="occasion"
                  label="场合"
                  rules={[{ required: true, message: '请选择场合' }]}
                >
                  <div ref={occasionRef}>
                    <Select placeholder="请选择场合" options={occasionOptions} />
                  </div>
                </Form.Item>
              </Col>
              <Col xs={24} md={12}>
                <Form.Item
                  name="style"
                  label="风格"
                  rules={[{ required: true, message: '请选择风格' }]}
                >
                  <div ref={styleRef}>
                    <Select placeholder="请选择风格" options={styleOptions} />
                  </div>
                </Form.Item>
              </Col>
              <Col xs={24} md={12}>
                <Form.Item
                  name="bodyType"
                  label="体型"
                  rules={[{ required: true, message: '请选择体型' }]}
                >
                  <div ref={bodyTypeRef}>
                    <Select placeholder="请选择体型" options={bodyTypeOptions} />
                  </div>
                </Form.Item>
              </Col>
              <Col xs={24}>
                <Form.Item
                  name="colorPreferences"
                  label="颜色偏好（可选）"
                >
                  <div ref={colorRef}>
                    <TextArea rows={2} placeholder="请输入你喜欢的颜色搭配，如不填写将根据季节推荐" />
                  </div>
                </Form.Item>
              </Col>
              <Col xs={24}>
                <Form.Item
                  name="keyPieces"
                  label="必备单品（可选）"
                >
                  <div ref={piecesRef}>
                    <TextArea rows={2} placeholder="请输入你想推荐的单品，每行一个，如不填写将自动生成" />
                  </div>
                </Form.Item>
              </Col>
              <Col xs={24}>
                <Form.Item>
                  <div ref={submitRef}>
                    <Button type="primary" htmlType="submit" loading={isGenerating} style={{ width: '100%' }}>
                      {isGenerating ? <Spin /> : '生成穿搭攻略'}
                    </Button>
                  </div>
                </Form.Item>
              </Col>
            </Row>
          </Form>
        </Card>

        {generatedContent && (
          <Card title="生成结果" extra={
            <div style={{ display: 'flex', gap: '8px' }}>
              <Button icon={<CopyOutlined />} onClick={handleCopy}>复制</Button>
              <Button icon={<DownloadOutlined />} onClick={handleDownload}>下载</Button>
            </div>
          }>
            <div ref={resultRef} style={{ whiteSpace: 'pre-wrap', wordBreak: 'break-word', lineHeight: 1.6 }}>
              {generatedContent}
            </div>
          </Card>
        )}
      </div>

      <CommonTour
        open={tourVisible}
        onClose={() => setTourVisible(false)}
        steps={tourSteps}
        targetRefs={tourRefs}
      />
    </>
  );
}